web6047 2023年２月

プログラミングやRPG（作るほう）が好きな人の日記

個人的な趣味（プログラミング、イラスト、電子回路）のページです。

日記を中心に、パソコン関係について、いろいろ細かく説明することがあります。

読んでいるときに、言葉の左下に　　水色の・を発見したら、

そこにマウスカーソルを合わせたり、タッチすると、言葉の意味を表示します。

自己紹介

48才、男、B型

電子機器を製造する工場で、派遣で働いています。

プログラミングが好きで小学校5年生のころからずっと続けています。

■趣味：　プログラミング、ゲーム音楽を集めて聴く、イラストを描く、映画、アニメ、ガンプラ　（興味の強い順）

■将来の夢は５つくらい持っていますが、生きてる間に実現できそうにありません。

猫を3匹飼う。
庭に「あずまや」のある家に住み、あずまやでプログラミングをする。
ロールプレイングゲームを完成させる。
※他、勉強関係３点（情報処理、電気などの勉強）

■私が使っているペンネーム（ハンドルネーム）は新しい順に

ペンネーム（ハンドルネーム）	いつごろ	場所
台形→三角形→平行四辺形理由があってペンネームを何度か変えていて右端が現在です。	現在（多）	Yahoo Japan
d_kawakawa	現在（少）	どこでも
cookiepurinman、cookiepudingman、cookiepuddingman	現在（極少）	Twitter
かわ、kawa	30年前	パソコン通信

■私への連絡手段：

ごくまれにしかツイートしませんが、私の twitter アカウントはこちらです。

https://twitter.com/cookiepudingman

何かメッセージをくれれば、返事すると思います。

返事がないときはメッセージに気付いていないんだと思います。そのときはすみません。

■管理人用：

Windows ケア　手順

タッチイベント　チェック用

電子機器組立て2級　暗記ツール　… 国家検定の電子機器組立て2級の暗記ツール（基板上配置）です。1級でも役立つと思います。

このサイトで最も興味を引く部分：　（そのつもり）

最近、私は個人的に、「RPG のコマンドメニュー部分のプログラム」を、中高生向けに、ステップバイステップ方式で教えようとしています。

ステップ同士のプログラム上の変化をマーキングして表示したり、バルーンメッセージを使って説明を付けたりと、いろいろ工夫をしていますが、はっきりいってわかりにくいんじゃないかと思っています。

Mini-NAVIGATION
RPGメニューを作る１基本のプログラムからはじめて、サブメニューを表示するまで Step 1～8 ▼図は Step 8	RPGメニューを作る２（記事としては４）メニューの項目に、付加情報（装備中のｅ記号や、店の価格）を表示。 Step 9、10、11 ▼図は Step 11	RPGメニューを作る３（記事としては５）メニューの項目を段組表示する Step 12、13 ▼図は Step 13

日記　（日記がこのサイトのメインコンテンツです。上の記事ほど新しい記事です）

2023/2/27（月）

PC-9801 アセンブリ言語で縦スクロール

高校生の頃にやりたかった PC-9801 でのスムーズスクロール。

30 年目にしてやっとできたぞ…、ぜいぜい=3

▼動画 45秒（5.28MB、MP4）

PC-9801 のグラフィックコントローラである「GDC」(Graphic Display Controller)という IC（ハードウェア）の SCROLL コマンドを使って、VRAM の表示開始位置を変化させることでスクロールを実現しています。（「PC-9801スーパーテクニック」の P140「グラフィック画面のスクロール」より）

やはり、PC-9801 には宇宙の広がりがある。様々な可能性に満ちている。

CGI & Perl ポケットリファレンス

日ごろからよく使うので、ページが 10 ページくらいごっそりと外れた状態になってしまいました。（写真左）

そして買いなおし。（写真右）

アマゾンで 1 円でした。送料が 247 円で、合計 248 円。

「売っている人はなぜ売っているのか」と思わせるような価格設定。

Perl とは、おもにインターネットのサーバー側で動作するプログラミング言語です。

Linux などの UNIX 系 OS では標準で搭載されています。

テキストファイルなどをいじるのが得意なプログラミング言語です。

人気はあまり無いみたいですが、私は昔から使っていてその流れで、今でも使っています。

2023/2/24（金）

また入札

Yahoo オークション。PC-9801 用ゲームソフト。

そのオークションページ

昔、友人から教えてもらった「ティルナノーグ」という RPG。

30 年前にたった一度聞いて、ずっと気になっていたものの、手を出したのは今回が初めて。

オークションは残り 8 時間となっていますが、終了直前で横取りする人がいるみたいなので、落とせないおそれがあります。

しかも、その人は自分が欲しくて入札するのではなく、「横取り」が目的で入札している感じがします。

「人がほしいと思って入札する」ところに「価値がある」と見なして横取りして、それをまたオークションで高い金額で出品する、のかなと想像します。

あくまでも私の思い出の品でそこに価値があるのであって、その思い出の無い人にはその他のゲームソフトと価値は同じはずなのに、その辺わからないんですかね。

それはともかく、私がずっと気にしていてどうしてここに来て改めて価値を見出したのかというと、

ゲーム画面が整っていて綺麗。
正統的なファンタジー RPG という作りで、楽しめそうだ。
私の RPG 開発のヒントがあるかもしれない。
友達が昔勧めていたものなので、何か良いところがあるはずだ。（実際にプレイしていて人の心に届く何かがあるのかもしれない）

私が入札一人目となって、その後 8 時間のあいだに、私の入札を見て、「価値があるのか？」と誰かが物色して、上記私が挙げた価値の 1 番目と 2 番目の一般的価値をその人が認めれば、入札二人目が入ってしまう。

私は基本的に争わないので、そこで終わってしまう。3,500 円、4,000 円とまで出す気はないからなぁ。。あくまでも 2,980 円で手に入るなら OK という動機で始めているので。。

2023年2月25日追記：　どうのこうの言っていましたが、入札私一人の状態のまま落札できました。(∩´∀｀)∩

2023/2/12（日）

PC-9801 N88-日本語 BASIC (86)　タイマ割り込みで定期描画の例

「PC-9801」とは今から 30 年前くらいに日本で 95 % 以上のシェアを誇っていたパソコンです。　
「N88-日本語 BASIC (86)」とは、その PC-9801 に標準で付属していたプログラミング言語です。

「一定時間（ミリ秒）ごとにアニメーションを行う」というのは、ゲームプログラムなどではそこそこ大事なことです。

その辺を気にしないでアニメーション・プログラムを作ると、パソコンの機種（処理速度）ごとに異なるスピードでアニメーションされる、という結果になってしまいます。

～高性能なパソコンでは一瞬でアニメが終わってしまう！

～低性能なパソコンでは思ったよりもずっとスローモーにアニメされてしまう！

一定時間（ミリ秒）ごとに何か処理をする、というのは、BASIC の標準の命令だけではできません。

今回は BASIC の中で一部、マシン語を導入して、一定時間（ミリ秒）ごとの処理を実現しています。

ちなみに、マシン語　＝　機械語　≒　アセンブリ言語　です。

（「実現」といっても、30年前、BASIC がよく使われていた時代には、できる人にはできていた処理です。今さら感がありますネ）

BASIC プログラム

■ BASIC プログラム（後述）のおおまかな流れ

70行目で、サブルーチン「*TIMERROOTIN.LOAD」（690行）へジャンプする。
DATA 行の内容をマシン語「TIMERROOTIN」としてメモリに書き込みします。
同様に、160行目で、サブルーチン「*TIMERCALLBACK.LOAD」（1050行）へジャンプする。
DATA 行の内容をマシン語「TIMERCALLBACK」としてメモリに書き込みします。
以降、順次、490 行目まで処理が進み、490 行目は GOTO 490 となっているので、ここで無限ループに入る。
ここに来るまでの間に、マシン語「TIMERROOTIN」が実行されていて、タイマーが設定されている。
タイマーにより、時間（100ms）になるとマシン語「TIMERCALLBACK」が実行される。
マシン語「TIMERCALLBACK」は、280 行目（ラベルの*FRAME）から BASIC の実行を開始するようプログラムされている。

以上により、「一定時間（ミリ秒）ごとにアニメーションを行う」が実現されます。

■ BASIC プログラムの最初のほうにある、CLEAR ,&H8000 とはなんだ

PC-9801 は通常、640KB のメモリが使用できます。

640K = 640 × 1,024 = 655,360、16進数にして 0xA0000

です。

PC-9801 のシステムでは、これを大まかに表現するために、最後の1桁を消して、0xA000 と表現しています。

0x0000 ～ 0xA000 までのメモリが使用できるということです。

下記プログラムの 30 行目の CLEAR ,&H8000 は、

0x0000 ～ 0x7FFF までを BASIC で使用し、0x8000 ～ 0xBFFF まではマシン語を自由に配置できます、

という意味になっています。（左図の鉛筆で囲った部分）

…30年前の高校生の頃は、そんなこと全然知らなかったし、理解もできなかったと思います。

■ この BASIC プログラムで主に使用している命令

「DEF SEG」命令はメモリを扱う際の大まかなアドレスを指定します。

「POKE」命令は、その大まかなアドレスの中で、（相対的な）指定番地のメモリに１バイトの値を書き込みます

「DATA」命令は、その場所にデータを置き、これは READ 命令で順次読み出せます。今回は機械語プログラムを置いています。

「READ」命令で読み出す場所は RESTORE 命令で指定できます。

■ プログラム（PC-9801 N88-日本語 BASIC (86) で動作します）


10 *TP


20 SAVE "P52.Z"


30 CLEAR ,&H8000


40 '


50 ' LOAD TIMER ROOTIN (ASEM)


60 DEF SEG = &H8000


70 GOSUB *TIMERROOTIN.LOAD


80   'ロードした一部（パラメータ）を変更


90   MS = 100 ' MUST 5 to ...


100   MS = MS - 6


110   POKE &HD, MS / 10 AND &HFF


120   POKE &HE, MS / 10 \ 256


130 '


140 ' LOAD TIMER CALLBACK ROOTIN (ASEM)


150 DEF SEG = &H9000


160 GOSUB *TIMERCALLBACK.LOAD


170   'ロードした一部（パラメータ）を変更


180   LINENUM = 280


190   POKE &H13, LINENUM AND &HFF


200   POKE &H14, LINENUM \ 256


210 '


220 *INIT


230 SCREEN 3, 0, 0, 1 : CLS 3


240 PRINT "START ( HIT ESC KEY TO END )"


250 THETA = 0


260 HANKEI = 100


270 '


280 *FRAME


290 X = COS( THETA ) * HANKEI : Y = SIN( THETA ) * HANKEI


300 THETA = THETA + .1


310 IF THETA > 6.283 THEN THETA = 0


320 '


330 *DRAW.


340 CLS 2


350 CIRCLE ( 320 + X, 200 + Y ), 8, 7


360 '


370 ' CONTROL ... DOUBLE BUFFERING


380 ACT = 1 + ( ACT = 1 )


390 DIS = 1 - ( ACT = 1 )


400 OUT &HA4, DIS : OUT &HA6, ACT


410 '


420 ' CONTROL ... END


430 'CNT = CNT + 1 :IF CNT = 5 THEN END


440 IF INKEY$ = CHR$( 27 ) THEN WHILE INKEY$ <> "" : WEND : END


450 '


460 ' CONTROL ... NEXT TIMER


470 DEF SEG = &H8000 : TIMER = 0 : CALL TIMER


480 '


490 GOTO 490 ' ETERNALOOP


500 '


510 '


520 *TIMERROOTIN.DATA


530 DATA 50             ' PUSH AX


540 DATA 53             ' PUSH BX


550 DATA 51             ' PUSH CX


560 DATA 06             ' PUSH ES


570 DATA B8,00,90       ' MOV AX, 9000 ' 割り込み先アドレス　セグメント


580 DATA 8E,C0          ' MOV ES, AX


590 DATA BB,00,00       ' MOV BX, 0000 ' 割り込み先アドレス　オフセット


600 DATA B9,01,00       ' MOV CX, 0001 ' CX * 10 ミリ秒後


610 DATA B4,02          ' MOV AH, 02   ' インターバルタイマBIOSコール


620 DATA CD,1C          ' INT 1C       ' 以上設定にて、BASICインタプリタ実行


630 DATA 07             ' POP ES


640 DATA 59             ' POP CX


650 DATA 5B             ' POP BX


660 DATA 58             ' POP AX


670 DATA CF             ' IRET


680 '


690 *TIMERROOTIN.LOAD


700 RESTORE *TIMERROOTIN.DATA


710 FOR I = 0 TO &H17


720   READ A$


730   POKE I, VAL( "&H" + A$ )


740 NEXT I


750 RETURN


760 '


770 '


780 *TIMERCALLBACK.DATA


790 DATA 50             ' PUSH AX ' 処理ルーチンで使用されるレジスタは


800 DATA 53             ' PUSH BX ' すべて退避する


810 DATA 51             ' PUSH CX


820 DATA 52             ' PUSH DX


830 DATA 56             ' PUSH SI


840 DATA 57             ' PUSH DI


850 DATA 1E             ' PUSH DS


860 DATA 06             ' PUSH ES


870 DATA B8,60,00       ' MOV AX, 0060 ' &H60をDSとSSにセット


880 DATA 8E,D8          ' MOV DS, AX


890 DATA 8E,D0          ' MOV SS, AX


900 DATA BF,39,00       ' MOV DI, 0039 ' コマンドコード39「テキストのサーチ」


910 DATA B8,BE,00       ' MOV AX, 00BE ' 入力:AX←行番号、出力:BX←テキストADR


920 DATA CD,C4          ' INT C4       ' 以上の設定でBASICインタプリタ実行


930 DATA BF,1B,00       ' MOV DI, 001B ' コマンドコード1B「指定行から実行」


940 DATA CD,C4          ' INT C4       ' 入力:BX←テキストアドレスで、実行


950 DATA 07             ' POP ES


960 DATA 1F             ' POP DS


970 DATA 5F             ' POP DI


980 DATA 5E             ' POP SI


990 DATA 5A             ' POP DX


1000 DATA 59             ' POP CX


1010 DATA 5B             ' POP BX


1020 DATA 58             ' POP AX


1030 DATA CF             ' IRET


1040 '


1050 *TIMERCALLBACK.LOAD


1060 RESTORE *TIMERCALLBACK.DATA


1070 FOR I = 0 TO &H24


1080   READ A$


1090   POKE I, VAL( "&H" + A$ )


1100 NEXT I


1110 RETURN

比較のため、JavaScript の場合

同じプログラムを JavaScript で書くと下記のようになります。実行する

定期的に描画を行うメソッド（ window.requestAnimationFrame() ）が標準で用意されているので、それを使って同じことができます。

（※下記 JavaScript のプログラム表示は、関数ごとに枠でくくり挿絵を表示するようになっています）


<html><!--ESCAPEPROCESS-->


<head>


<meta content="text/html; charset=UTF-8" http-equiv="content-type">


<script>



function onloadx() {


ms = 100;




//INIT


cc = document.getElementById( "test" ).getContext( "2d" );


cc.canvas.width = 640;


cc.canvas.height = 400;


theta = 0;


hankei = 100;




frameTm_bak = 0;


frame( 0 );


}






function frame( tm ) {


if( tm - frameTm_bak >= ms ) {


frameTm_bak = tm;




x = Math.cos( theta ) * hankei;


y = Math.sin( theta ) * hankei;


theta += 0.1;


//check.


if( theta > Math.PI * 2 ) theta = 0;




draw( cc );


}


// control ... next timer


requestAnimationFrame( frame );


}






function draw( cc ) {


cc.clearRect( 0, 0, cc.canvas.width, cc.canvas.height );


cc.beginPath();


cc.arc( 320 + x, 200 + y, 8, 0, 6.28 );


cc.closePath();


cc.strokeStyle = "white";


cc.stroke();


}





</script>


<style>


</style>


</head>


<body onload="onloadx()">


<canvas id="test" style="


border : solid 1px gray;


background-color : black;


image-rendering : crisp-edges;


">


</canvas>


</body>


</html>

▼そして実行の様子（左が PC-9801 BASIC、右が JavaScript）

どちらのプログラムも、その機械の処理速度ではなく、指定の秒数（ミリ秒）を基準に動作しているので、

PC-9801 BASIC　＝　Intel 286 １コア 10 MHz　と、

Windows 11 JavaScript　＝　Intel core i5 ６コア 3.38 GHz

の両者で処理速度は違っても、ほぼ同じ速度で円が回転しています。

よく見ると、速さが少しズレていますが、PC-9801 BASIC のほうで速度設定をどう調整しても、右と同じ速度にはできなかったんです。

まぁ、そこまで厳密にする必要はないんですが…。

高校生の頃に指をくわえてみていた、人が作ったマシン語ありのプログラムは、30年以上経ってやっと今できるようになりました。

やはり大人になっていろいろ知識を得てから、、または専門の学校で電子回路を学んで IC の中にアクセスする技術とか、そういう知識を得てからでないと、こういうプログラムは組めないのだろうか…と思いました。

子供の頃こそ、こういう技術が必要なんですけどね。

2023/2/3（金）

ポピュラスのタイトルロゴが割れていたので、、

　← これ

ホームページの H2 タグも割ってみました。→

HAVE A BREAK, HAVE A -web KIT -mask-image!

割るのに必要な事柄は以下の通りです。

（作り方の説明ではなく、こんなことをやって実現していますというだけの説明なので、実現する説明としては不十分です）

JavaScript の cloneNode() メソッドを使って H2 タグの複製を作ります。
CSS の mask-image 関連のプロパティをいじり、H2 タグは右半分を消去、複製のほうは左半分を消去します。
割れ目になっている部分は、「割れ目の画像」を用意し表示します。なおかつ、「割れ目の画像と片側が同じ形状のマスク画像」（下図※１部）を H2 タグの CSS "mask-image" で指定して、H2 タグの半分を消します。なお、マスク画像は、H2 タグの伸縮に合わせるために「長方形の形状のマスク画像」と合わせて２つとなります。

※１
H2 タグ、その複製、各マスク画像の座標やサイズは厳密に正確に計算します。（単純ではなく、少し難しいです。下図）
各画像は割れ目の形がピタリと合うように、正確に作成します。下図